<template>
  <div class="alone-outBox f14">
    <el-card class="box-card">
      <el-col :span="4"
              style="border-radius: 2px">
        <el-menu default-active="2"
                 class="el-menu-vertical-demo"
                 @open="handleOpen"
                 @close="handleClose">
          <el-menu-item index="1">
            <span slot="title">提醒1<el-badge :value="12"
                        style="margin-left:180px;"
                        class="item"></el-badge></span>
          </el-menu-item>
          <el-menu-item index="2">
            <span slot="title">提醒2<el-badge :value="12"
                        style="margin-left:180px"
                        class="item"></el-badge></span>
          </el-menu-item>
          <el-menu-item index="3">
            <span slot="title">提醒3<el-badge :value="12"
                        style="margin-left:180px"
                        class="item"></el-badge></span>

          </el-menu-item>
        </el-menu>
      </el-col>
      <el-col :span="18"
              style="margin-left:20px">
        <el-tabs v-model="tabName"
                 @tab-click="handleClick">
          <el-tab-pane label="全部"
                       name="1">
            <el-collapse accordion
                         v-for="o in 10"
                         :key="o">
              <el-collapse-item>
                <template slot="title">
                  <div style="box-sizing: inherit;margin: 0;padding: 0;"><span class="news"></span><span class="news-title">有用户下载您的资料/解决方案</span></div>
                  <div class="padding-right: 15px;">2023-02-27 10:52:54</div>
                </template>
                <div class="list_content">用户下载了您的资料/解决方案(有用户下载您的资料/解决方案)，<a style="color: #0c7ff2!important;"
                     href="https://console.instrument.com.cn/#/business/businessmanage/downloaduser">点击查看详情&gt;&gt;</a></div>
              </el-collapse-item>
            </el-collapse>
          </el-tab-pane>
          <el-tab-pane label="未读"
                       name="2">未读</el-tab-pane>
          <el-tab-pane label="已读"
                       name="3">已读</el-tab-pane>
          <div style="margin-top: 15px;float: right;">
            <el-pagination @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :current-page="currentPage4"
                           :page-sizes="[100, 200, 300, 400]"
                           :page-size="100"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="400">
            </el-pagination>
          </div>
        </el-tabs>
      </el-col>
    </el-card>
  </div>
</template>
  <script>
import Pagination from '@/components/Pagination/index.vue'
import Cookies from 'js-cookie'
import indexapi from '@/api/index'

export default {
  components: {
    Pagination
  },
  data () {
    return {
      tabName: '1',
      allMessageList: {

      },
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4
    }
  },
  mounted () {

  },
  methods: {
    // 格式时间
    formatDate (value) {
      this.value1 = new Date(value)// value.createdTime是prop绑定的字段名称
      const dateValue = this.$moment(Number(this.value1)).format('YYYY-MM-DD HH:mm:ss')// $moment专门转化时间的插件（使用时需要下载引入）
      return dateValue
    },
    handleClick (tab, event) {
      console.log(tab, event);
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`);
    }

  }
}
  </script>
  <style scoped>
.list_content {
  padding: 10px 16px 0 33px;
  color: #7e8790;
}
.news-title {
  font-size: 14px;
  font-weight: 400;
  color: #4f5862;
  line-height: 16px;
  margin-left: 16px;
}
.news {
  width: 8px;
  height: 8px;
  background: #e92700;
  display: inline-block;
  border-radius: 50%;
}
.topButton {
  position: absolute;
  right: 20px;
  top: 16px;
}
.flex_bt {
  justify-content: space-between;
}
.icon_right {
  font-weight: 600;
  color: #0c7ff2;
  cursor: pointer;
  font-size: 18px;
}
.title-font {
  width: 64px;
  height: 22px;
  font-size: 16px;
  font-family: PingFang SC-Semibold, PingFang SC;
  font-weight: 600;
  color: #000000;
  line-height: 19px;
  -webkit-background-clip: text;
}
.name-font {
  display: inline-block;
  vertical-align: middle;
  width: 330px;
  height: 30px;
  font-size: 14px;
  font-family: PingFang SC-Semibold, PingFang SC;
  font-weight: 600;
  color: #000000;
  line-height: 16px;
  -webkit-background-clip: text;
}
.card-style {
  width: 1752px;
  height: 100px;
  background: linear-gradient(180deg, #f8fbff 0%, rgba(255, 255, 255, 0) 100%);
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
  border: 1px solid #e5eaf0;
}
.blue-gan {
  width: 4px;
  height: 16px;
  background: #0c7ff2;
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
}
</style>
  